<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js 改样式</title>
		<style>
		#d1 img{
			height: 200px;
			width: 200px;
		}
		  .im{
			  border: 10px gold outset;
			  border-radius: 50%;
			  box-shadow: 20px 5px blue;
		  }
		</style>
		<script>
		 function changeCss(){
			 var d1=document.getElementById("d1");
			 var p=d1.lastElementChild;
			 p.classList.add("im");
			 
			 // p.style.border="5px red groove";
			 //p.style.borderRadius="50%";
			// p.style.cssText="border:5px green groove;border-radius: 50%;";
		 }
		 //长宽加20像素
		 function enhanceImg(){
			 var d1=document.getElementById("d1");
			 var p=d1.lastElementChild;//只能读到行内样式
			 var obj=document.defaultView.getComputedStyle(p,null)||p.currentStyle;
			 var w=obj.width;
			 var h=obj.height;
			 console.log("高是"+h+",宽是："+w);
			 p.style.height=(parseInt(h)+20)+"px";
			 p.style.width=(parseInt(w)+20)+"px";
		 }
		</script>
	</head>
	<body>
		<div id="d1">
			<img src="3.jpg"/>
			<!-- <img src="3.jpg" style="width: 100px;height: 100px;"/> -->
		</div>
		<div id="d4">
			<input type="button" value="改变样式"  onclick="changeCss()"/>
			<input type="button" value="大大大"  onclick="enhanceImg()"/>
		</div>
	</body>
</html>
